
const app = getApp();
const { AskComponent } = app._require("common/index");
AskComponent({
    properties: {
        show: {
            type: Boolean,
            value: false,
        },
    },
    data: {
        isExpanded: false,
        collapseHeight: "0",
        transition: false,
        isFirstEnter: true,
    },
    lifetimes: {
        ready: function () {
            if (this.data.isExpanded) {
                this.setData({
                    collapseHeight: "auto",
                });
            } else {
                this.setData({
                    collapseHeight: "0",
                });
            }
        },
    },
    methods: {
        updateStyle() {
            this.setData({ transition: true });
            return this.getRect(".ask-collapse-content")
                .then(rect => rect.height)
                .then(height => {
                    if (this.data.isExpanded) {
                        return this.set({
                            collapseHeight: height ? `${height}px` : "auto",
                        });
                    }
                    return this.set({ collapseHeight: `${height}px` })
                        .then(this.askNextTick)
                        .then(() => this.set({ collapseHeight: 0 }));
                });
        },
        onTransitionEnd() {
            if (this.data.isExpanded) {
                this.set({ collapseHeight: "auto" });
            }
        },
    },
    observers: {
        show: function (val, oldVal) {
            if (val !== this.data.isExpanded) {
                this.setData(
                    {
                        isExpanded: val,
                    },
                    () => {
                        this.updateStyle();
                    }
                );
            }
        },
    },
});
